<template>
  <view class="collection-container">
    <view v-if="collectedDemands.length === 0" class="empty-tips">
      <image src="/static/empty-collection.png" class="empty-img" />
      <text class="empty-text">这里空空如也呀</text>
    </view>
    <view 
      v-for="item in collectedDemands" 
      :key="item.id"
      class="collection-item"
    >
      <view class="header">
        <text class="school">{{ item.schoolName }}</text>
        <text class="status" :class="item.status">{{ getStatusText(item.status) }}</text>
      </view>
      <view class="info">
        <text>📍 {{ item.location }}</text>
        <text>👥 需要{{ item.needCount }}人</text>
        <text>⏳ {{ item.duration }}</text>
      </view>
      <view class="footer">
        <text class="deadline">截止：{{ item.deadline }}</text>
        <button @click="cancelCollect(item.id)">取消收藏</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      collectedDemands: uni.getStorageSync('collections') || []
    }
  },
  methods: {
    getStatusText(status) {
      return { ongoing: '招募中', closed: '已截止' }[status]
    },
    cancelCollect(id) {
      this.collectedDemands = this.collectedDemands.filter(item => item.id !== id)
      uni.setStorageSync('collections', this.collectedDemands)
      uni.$emit('collection-updated')
      uni.showToast({ title: '已取消收藏' })
    }
  }
}
</script>

<style lang="scss">
.collection-container {
  padding: 20rpx;
}

.collection-item {
  align-items: center;
  background: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    .school {
      font-size: 30rpx;
      color: #2c3e50;
    }
    
    .status {
      font-size: 24rpx;
      &.ongoing { color: #5bc0eb; }
      &.closed { color: #999; }
    }
  }
  
  .info text {
    display: block;
    margin-bottom: 10rpx;
    color: #666;
  }
  
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    
    .deadline {
      color: #e64340;
    }
    
    button {
      background: #f0f0f0;
      color: #666;
      padding: 8rpx 20rpx;
      border-radius: 30rpx;
    }
  }
}

.empty-tips {
  text-align: center;
  padding: 100rpx 0;
  
  .empty-img {
    width: 600rpx;
    height: 400rpx;
    opacity: 0.2;
	 align-items: center;
  }
  
  .empty-text {
    display: block;
    color: #999;
    margin-top: 20rpx;
  }
}
</style> 